<template>
	<view >
		<view v-for="item in activitys" :key="item.id">
			<uni-card :title="item.name" :extra="item.location">
				<view >状态：{{item.audit}}</view>
				<view v-if="item.audit=='审核不通过'">请联系心理辅导处</view>
				<view>活动时间：{{item.time}}</view>
				<view>
					<!-- <button type="primary" style="margin-top: 10rpx;" @click="sign(item.id)" >预约</button> -->
					<button v-if="item.audit!='审核不通过'" type="primary" style="margin-top: 10rpx;"
						@click="dialogToggle(item.sid,item.name)">取消报名</button>
				</view>
			</uni-card>
		</view>
		<view  v-if="activitys.length === 0" style="text-align: center; font-size: 48rpx; height: 100vh; line-height: 100vh; color:rgb(127,127,126) ;">
			你还没报名任何活动哦！
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="再次确认" :content="`你将取消${name}活动!`"
					@confirm="dialogConfirmDel" ></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				activitys:[],
				name: '',
				activityid: null,
				sid:null,
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user');
			this.loading();
			// this.request({
			// 	url: `/activitySign/page/front/${uni.getStorageSync('user').id}`
			// }).then(res => {
			// 	this.activitys = res.data;
			// 	console.log(this.activitys);
			// });
		},
		methods: {
			loading(){
				this.request({
					url: `/activitySign/page/front/${this.user.id}`
				}).then(res => {
					this.activitys = res.data;
					console.log(this.activitys);
				});
			},
			dialogToggle(activitySignId,activityName) {
				this.sid=activitySignId;
				this.name=activityName;
				this.$refs.alertDialog.open();
			},
			dialogConfirmDel() {
					this.request({
						url: `/activitySign/${this.sid}`,
						method: 'DELETE'
					}).then(res => {
						if (res.code === '0') {
							uni.showToast({
								title: '取消成功'
							})
						}
						this.loading();
					});
			},
		}
	}
</script>

<style>

</style>
